<template>
	<view>
		<view class="repeal" v-if="!status">
			<view class="repeal-big">
				您已成功发起退款申请，请耐心等待商家处理
			</view>
			<view class="repeal-small">
				还剩{{retreatTime}}天
			</view>
		</view>
		<view class="repeal" v-if="status">
			<view class="repeal-big">
				您已成功撤销退款申请
			</view>
			<view class="repeal-small">
				{{time}}
			</view>
		</view>
		<!-- 提示信息 -->
		<view class="" v-if="!status">
			<view class="refund-title">
				<text>提示信息</text>
			</view>
			<view class="refund-tip">
				<view class="info">
					● 商家同意或者超时未处理，系统都将会退款给您。
				</view>
				<view class="btn" @tap="refund">
					撤销申请
				</view>
			</view>
		</view>
		<!-- 退款信息 -->
		<view class="refund">
			<view class="refund-title">
				<text>退款信息</text>
			</view>
			<!-- 商品卡片 -->
			<view class="refund-info" @tap="refundInfo">
				<view class="img">
					<image src="" mode=""></image>
				</view>
				<view class="right">
					<view class="commodity-name">
						{{commodity.name}}
					</view>
					<view class="commodity-sku">
						{{commodity.sku}}
					</view>
				</view>
			</view>
		</view>
		<view class="pan-list">
			<view class="list-item">
				<view class="list-item-left">
					退款原因
				</view>
				<view class="list-item-right">
					{{commodity.cause}}
				</view>
			</view>
			<view class="list-item">
				<view class="list-item-left">
					退款金额
				</view>
				<view class="list-item-right">
					￥{{commodity.money}}
				</view>
			</view>
			<view class="list-item">
				<view class="list-item-left">
					退款编号
				</view>
				<view class="list-item-right">
					{{commodity.serial}}
				</view>
			</view>
			<view class="list-item">
				<view class="list-item-left">
					申请时间
				</view>
				<view class="list-item-right">
					{{commodity.time}}
				</view>
			</view>
		</view>
		<!-- 联系客服 -->
		<view @tap="customer" class="customer" hover-class="change" hover-stay-time="100">
			<view class="customer-left">
				联系客服
			</view>
			<view class="customer-right">
				<image src="../../static/images/arrows-right.png" mode=""></image>
			</view>
		</view>
		<!-- 模态框 -->
		<view class="uni-mask" v-if="bannerShow">
			<view class="uni-banner" style="background: #FFFFFF;">
				<view class="notice">
					您将撤销本次申请，如果问题未解决，您还
					可以再次发起，确定撤销本次退款申请？
				</view>
				<view class="bottom">
					<view class="left" @tap="cancel">
						取消
					</view>
					<view class="right" @tap="confirm">
						确认
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time: '2019年8月4日 11:37',
				retreatTime: "1",
				commodity: {
					name: '芝兰 榻榻米床头板软床头板软床头板软床头板软包床头靠垫木床头罩',
					sku: '9203-22#深灰色;180*150*10厚有床头款',
					cause: '拍错/多拍/不想要',
					money: '279',
					serial: '125962004589657',
					time: '2019-8-4 10:53'
				},
				status: false,
				//遮罩层控制
				bannerShow: false,
			}
		},
		methods: {
			// 联系客服
			customer() {
				uni.showToast({
					title: '联系客服',
					duration: 2000
				});
			},
			//.撤销申请
			refund() {
				this.bannerShow=true;
			},
			//取消撤销申请
			cancel(){
				this.bannerShow=false;
			},
			confirm(){
				uni.showToast({
					title: '撤销申请',
					duration: 2000
				});
			},
			refundInfo() {
				uni.showToast({
					title: '订单详情跳转',
					duration: 2000
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	//申请成功
	.repeal {
		height: 270upx;
		background: linear-gradient(0deg, rgba(232, 39, 27, 1), rgba(252, 63, 12, 1));
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		padding: 100upx 0 0 67upx;

		.repeal-big {
			font-size: 28upx;
		}

		.repeal-small {
			font-size: 24upx;
		}
	}

	//退款信息
	.refund-title {
		padding: 25upx 28upx;
		background: #FFFFFF;
		font-size: 28upx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		border-bottom: 1upx solid rgba(247, 247, 247, 1);
	}

	.refund-tip {
		background: #FFFFFF;
		padding: 25upx 28upx;
		position: relative;
		height: 230upx;
		margin-bottom: 20upx;

		.info {
			font-size: 22upx;
			font-weight: 500;
			color: rgba(128, 128, 128, 1);
			margin-top: 30upx;
		}

		.btn {
			position: absolute;
			margin-top: 40upx;
			right: 30upx;
			text-align: center;
			width: 140upx;
			line-height: 48upx;
			border: 1upx solid rgba(246, 56, 16, 1);
			border-radius: 10upx;
			font-size: 24upx;
			font-weight: 500;
			color: rgba(246, 56, 16, 1);
		}
	}

	//商品信息面板
	.refund-info {
		background: #FFFFFF;
		padding: 25upx 28upx;
		display: flex;

		.img {
			width: 140upx;
			height: 140upx;

			image {
				width: 140upx;
				height: 140upx;
				background: red;
				border-radius: 10upx;
			}
		}

		.right {
			width: 81%;

			.commodity-name {
				margin: 10upx 0 5upx 20upx;
				font-size: 28upx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.commodity-sku {
				margin-left: 20upx;
				width: 400upx;
				font-size: 22upx;
				font-weight: 500;
				color: rgba(128, 128, 128, 1);
				line-height: 30upx;
			}
		}
	}

	// 原因面板
	.pan-list {
		background: #FFFFFF;
		margin-top: 20upx;
		font-size: 24upx;
		font-weight: 500;
		color: rgba(128, 128, 128, 1);

		.list-item {
			border-bottom: 1upx solid rgba(247, 247, 247, 1);
			padding: 20upx 30upx;
			display: flex;
			justify-content: space-between;
		}
	}

	.customer {
		padding: 20upx 30upx;
		display: flex;
		justify-content: space-between;
		margin-top: 20upx;
		background: #FFFFFF;
		margin-bottom: 50upx;

		.customer-right {
			width: 22upx;
			height: 22upx;

			image {
				width: 22upx;
				height: 22upx;
			}
		}
	}

	.change {
		background: rgba(247, 247, 247, 1);
	}
	/* 遮罩层 */
	.uni-mask {
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 888;
	}
	
	/* 弹出层形式的通知*/
	.uni-banner {
		width: 80%;
		position: fixed;
		left: 50%;
		top: 50%;
		border-radius: 26.66upx;
		z-index: 88888;
		transform: translate(-50%, -50%);
	
		.notice {
			padding: 60upx 40upx;
			font-size:26upx;
			font-weight:500;
			color:rgba(51,51,51,1);
			line-height:40upx;
			border-bottom:1upx solid #E6E6E6 ;
		}
	
		.bottom {
			display: flex;
			flex-direction: row;
			align-items: center;
			color: #333333;
			font-size: 36upx;
			font-weight: bold;
			text-align: center;
	
			.left {
				padding-top: 25upx;
				width: 50%;
				height: 98upx;
			}
	
			.right {
				width: 50%;
				padding-top: 25upx;
				height: 98upx;
				color: rgba(246, 56, 16, 1);
				border-left: 1upx solid #E6E6E6;
			}
		}
	}
	
</style>
